<template>
  <div class="page-bill-list">
    <el-form :inline="true" :model="stockqueryForm" ref="stockqueryForm">
      <div class="pc-page-header">
        <el-form-item>
          <el-input v-model="stockqueryForm.wrNo" clearable class="pc-input3-col6" placeholder="输入仓单编号"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: -6px">
          <el-select v-model="stockqueryForm.storageId" clearable v-if="this.roleType!=='isStorage'" remote
                     reserve-keyword filterable placeholder="选择仓库" class="pc-input3-col6" value=""
                     :remote-method="searchStorage" @focus="searchStorage()">
            <el-option v-for="item in storageList" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: -6px">
          <el-date-picker class="block"
                          v-model="stockqueryForm.signDate"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="仓单签发开始日期"
                          end-placeholder="仓单签发结束日期"
                          value-format="yyyy-MM-dd"
                          @change="getDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="isshowMore">
          <!--   <el-input v-model="stockqueryForm.storageName"  clearable class="pc-input3-col5" placeholder="仓库"></el-input> -->
          <el-select  v-model="stockqueryForm.isActive" clearable class="pc-input3-col5" placeholder="选择有效状态" value="">
            <el-option v-for="item in isActive" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>

        </el-form-item>
        <el-form-item v-if="isshowMore">
          <el-input v-model="stockqueryForm.ownerName" clearable v-if="this.roleType!=='isOwner'" class="pc-input3-col6"
                    placeholder="输入货权所有人"></el-input>
        </el-form-item>
        <el-form-item v-if="isshowMore" style="margin-left: -6px">
          <el-input v-model="cntrNoString"  clearable class="pc-input3-colBill" placeholder="多个柜号用','隔开"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('stockqueryForm')">刷新</el-button>
          <el-button type="primary" v-permission="['wms:dataquery:billexport']" @click="exportData()">导出</el-button>
          <el-button @click="showMore()">{{showMoreText}}</el-button>
        </el-form-item>
      </div>
    </el-form>
    <egrid v-if="this.roleType==='isAdmin' " border class="page-list"
           :data="tableData"
           :columns="columnsAdmin"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler">
    </egrid>

    <egrid v-if="this.roleType==='isOwner' " border class="page-list"
           :data="tableData"
           :columns="columnsOwner"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler">
    </egrid>
    <egrid v-if=" this.roleType==='isStorage'" border class="page-list"
           :data="tableData"
           :columns="columnsStorage"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler">
    </egrid>


    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryInstoreList"  :queryData="stockqueryForm"
                     @on-query="queryCallBackFn">
      </pc-pagination>
    </div>
    <pc-dialog :is-show="isShowDetailDialog" title='仓单详情' @on-close="isShowDetailDialog = false">
      <div>
        <detail :id="detailId">
        </detail>
      </div>
    </pc-dialog>

    <pc-dialog :is-show="isAdditionalInformation" title='资料补全' @on-close="isAdditionalInformation = false">
      <div>
        <edit-info :version="this.version" :detailId="this.detailId" @closeRefresh="closeRefresh">
        </edit-info>
      </div>
    </pc-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import PcDialog from 'components/dialog';
  import EditInfo from './editInfo/editInfo.vue';
  // import InstoreAddOwner from './instoreAddOwner/index.vue';
  import Detail from './billManagement/billDetail.vue';
  import EgridCellView from 'components/wms/comm/EgridCellView.vue';
  // import { Notification } from 'element-ui';
  // 操作按钮
  var Btn = {
    template: `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button  type="danger" v-if="showHandle===1&&hasPermission('wms:dataquery:improveWrInfo')" plain @click="toEditFn(row)">资料补全</el-button>
      </div>`,
    props: ['row'],
    computed: {
      showHandle() {
        return this.row.isEditable;
      }
    },
    methods: {
      toEditFn (val) {
        this.$emit('handle-order', val);
      }
    }
  };

  // 仓单编号链接详情
  var wrNoLink = {
    template: ` <el-button class="bill-no" @click="viewdetail(row)" type="text" size="small">{{this.row.wrNo}}</el-button>`,
    props: ['row'],
    computed: {
      showHandle() {
        return this.row.isEditable;
      }
    },

    methods: {
      viewdetail(val) {
        that.detailId = val.id;
        this.$emit('order-detail', val);
      }
    }
  };
  let that;
  export default {
    data () {
      return {
        isshowMore: false,
        version: 0,
        sumIsEditable: 0,
        cntrNoString: '',
        showMoreText: '更多',
        roleType: 0, // 1超级管理员 2云仓 3 货主企业
        isEditable: '',
        detailId: '',
        isAdditionalInformation: false,
        isShowDetailDialog: false,
        stockqueryForm: {
          wrNo: '',
          isActive: '',
          signDate: null,
          ownerName: '',
          storageId: '',
          startDate: null,
          endInDate: null,
          cntrNo: []
        },
        tableData: [],
        storageList: [],
        columnsAdmin: [
          {
            label: '仓单编号',
            // prop: 'wrNo',
            component: wrNoLink,    // 'el-button'
            listeners: {
              'order-detail' (val) {
                that.viewDetailFn(val);
              }
            }
          },
          {
            label: '仓单签发时间',
            prop: 'signDateDisplay'
          },
          {
            label: '有效状态',
            prop: 'isActiveDisplay'
          },
          {
            label: '保管仓',
            prop: 'storageName'
          },
          {
            label: '货权所有人',
            prop: 'storerName'
          },
          {
            label: '柜号',
            prop: 'cntrNo'
          }
        ],
        columnsOwner: [
          {
            label: '仓单编号',
            // prop: 'wrNo',
            component: wrNoLink,    // 'el-button'
            listeners: {
              'order-detail' (val) {
                that.viewDetailFn(val);
              }
            }
          },
          {
            label: '仓单签发时间',
            prop: 'signDateDisplay'
          },
          {
            label: '有效状态',
            prop: 'isActiveDisplay'
          },
          {
            label: '保管仓',
            prop: 'storageName'
          },
          {
            label: '柜号',
            prop: 'cntrNo'
          }
        ],
        columnsStorage: [
          {
            label: '仓单编号',
            // prop: 'wrNo',
            component: wrNoLink,    // 'el-button'
            listeners: {
              'order-detail' (val) {
                that.viewDetailFn(val);
              }
            }
          },
          {
            label: '仓单签发时间',
            prop: 'signDateDisplay'
          },
          {
            label: '有效状态',
            prop: 'isActiveDisplay'
          },
          {
            label: '货权所有人',
            prop: 'storerName'
          },
          {
            label: '柜号',
            prop: 'cntrNo'
          }
        ],
        columnsSchema: {
          '仓单编号': {minWidth: 150},
          '仓单签发时间': {minWidth: 120},
          '保管仓': {minWidth: 240},
          '货权所有人': {minWidth: 240}
        },
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 120,
          showOverflowTooltip: true,
          component: EgridCellView
        },
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列

        isActive: [
          {
            value: '0',
            label: '无效'
          },
          {
            value: '1',
            label: '有效'
          }
        ],
        pageUrl: {
          // url  /instore/listInstore
          queryInstoreList: '/maliwms/wr/getWrList'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog, Detail, EditInfo
    },
    created () {
      that = this;
      let roleNun;
      roleNun = parseInt(this.$store.getters.getRoleId);
      if (roleNun === 1 || roleNun === 2) {
        this.roleType = 'isAdmin';   // 管理员
      } else if (roleNun === 3 || roleNun === 4) {
        this.roleType = 'isOwner';     // 货主
      } else if (roleNun === 6) {
        this.roleType = 'isStorage'; // 仓库
      } else {
        this.roleType = false;
      }
    },
    mounted() {
      this.initData();
    },

    methods: {

      getDetailInfo() {
        let valueStr = '/' + this.detailId + '/' + this.version;
        this.ajax({
          type: 'GET',
          url: '/maliwms/wr/wrDetail' + valueStr,
          loading: false,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.isAdditionalInformation = true;
              this.isShowDetailDialog = false;
            }
          }
        });
      },
      closeRefresh() {
        this.successTip('提交成功');
        this.isAdditionalInformation = false;
        this.isShowDetailDialog = false;
        this.refresh('stockqueryForm');
      },
      initData() {
        this.ajax({
          url: '/maliwms/storage/listStorage',
          type: 'POST',
          data: {},
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.allStorages = res.result.list;
            this.list = this.allStorages.map(item => {
              return {value: item.id, label: item.storageName};
            });
          }
        });
      },
      searchStorage (query) {
        if (query !== '' && query !== undefined) {
          setTimeout(() => {
            this.storageList = this.list.filter(item => {
              return item.label.toLowerCase()
                  .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.storageList = this.list.filter(item => {
            return item.label.toLowerCase();
          });
        }
      },
      getDate() {
        if (this.stockqueryForm.signDate === null) {
          this.stockqueryForm.startDate = '';
          this.stockqueryForm.startDate = '';
        } else {
          this.stockqueryForm.startDate = this.stockqueryForm.signDate[0];
          this.stockqueryForm.endDate = this.stockqueryForm.signDate[1];
        }
      },
      // 表头样式
      getHeaderStyle({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      getRowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      viewDetailFn (scopeRow) {
        this.isShowDetailDialog = true;
      },
      openMessage() {
        this.$notify.info({
          title: '自定义位置',
          message: '右下角弹出的消息',
          position: 'bottom-right'
        });
      },
      showMore () {
        this.isshowMore = !this.isshowMore;
        if (this.isshowMore) {
          this.showMoreText = '收起';
        } else {
          this.showMoreText = '更多';
        }
      },
      queryCallBackFn (res) {
        this.tableData = res.result.list;
        this.sumIsEditable = 0;         // 先合计的可编辑状态清零
        this.tableData.forEach(v => {  // 获取的列表对编辑状态进行遍历，并合计，通过得到的值进行判断是否将操作列的标题是否隐藏
          this.sumIsEditable += v['isEditable'];
        });
      },
      queryDataFn () {
        if (this.cntrNoString == '' || this.cntrNoString == null || this.cntrNoString == undefined) { //eslint-disable-line
          this.cntrNoString = '';
          this.stockqueryForm.cntrNo = [];
        } else {
          this.cntrNoString = this.cntrNoString.replace('，', ',', this.cntrNoString);
          this.stockqueryForm.cntrNo = this.cntrNoString.split(',');
        }
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      toEditInfoFn (scopeRow) {
        this.version = scopeRow.version;
        this.detailId = scopeRow.id;
        this.isAdditionalInformation = true;
        this.isShowDetailDialog = false;
      },
      refresh (formName) {
        this.$refs[formName].resetFields();
        this.stockqueryForm.signDate = null;
        this.stockqueryForm.wrNo = '';
        this.stockqueryForm.isActive = '';
        this.stockqueryForm.ownerName = '';
        this.stockqueryForm.storageId = '';
        this.stockqueryForm.startDate = null;
        this.stockqueryForm.endDate = null;
        this.stockqueryForm.cntrNo = '';
        this.cntrNoString = '';
        this.queryDataFn();
      },
      // 导出仓单数据
      exportData() {
        this.exportFile({type: 'POST',
          url: '/maliwms/wr/exportWrList',
          data: this.stockqueryForm,
          loading: true,
          fileNameStart: '仓单'
        });
      },
      columnsHandler (cols) {
        if (this.sumIsEditable > 0) {  // 如果大于0，代表有可编辑的数据
          return cols.concat({
            label: '操作',
            minWidth: 116,
            fixed: 'right',
            component: Btn, // 'el-button'
            listeners: {
              'handle-order' (data) {
                that.toEditInfoFn(data);
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          });
        } else {
          return cols.concat({
            label: '',
            minWidth: 116,
            fixed: 'right'
          });
        }
      }
    }
  };
</script>
<style scoped>
  .page-bill-list .el-upload-list--picture-card .el-upload-list__item-thumbnail{
    width: 146px;
    height: 146px;
    display: block;
    position:relative;
  }
  .page-bill-list .el-upload-list--picture-card .el-upload-list__item-thumbnail:before{
    content: "\E614";
    position: absolute;
    top: 18px;
    left: 40px;
    color: #b3b3b3;
    font-size: 60px;
    font-family: "maliiconfont" !important;
  }
  .page-bill-list .topClassEditInfo .el-upload-list--picture-card .el-upload-list__item .el-icon-close
  {
    display: none;
  }
  .page-bill-list .topClassEditInfo .el-upload-list--picture-card .el-upload-list__item .el-icon-close-tip
  {
    display: none;
  }
  .page-bill-list .bill-no {
    padding: 5px 0px !important;
  }
  .pc-input3-colBill {
    width: 200px !important;
    box-sizing: border-box;
  }
</style>
